<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>过渡</title>
    <link rel="stylesheet" href="public.css">
    <style>
        #box1 {
            transition: background-color 2s 1s, width 1s;
        }
        #box1:hover {
            width: 400px;
            background-color: seagreen;
        }
        #box2 {
            transition: background-color 3s, width 3s ,height 3s , transform 3s;
        }
        #box2:hover {
            transform: rotate(50deg);
            width: 200px;
            height: 200px;
            background-color: pink;
        }
    </style>
</head>

<body>
    <p>CSS3 过渡是元素从一种样式逐渐改变为另一种的效果。<br> 要实现这一点，必须规定两项内容：</p>
    <ol>
        <li>指定要添加效果的CSS属性</li>
        <li> 指定效果的持续时间.</li>
    </ol>
    <p>语法: transition: property duration timing-function delay;</p>
    <ol>
        <li>transition-property	指定CSS属性的name，transition效果</li>
        <li>transition-duration	transition效果需要指定多少秒或毫秒才能完成</li>
        <li>transition-timing-function	指定transition效果的转速曲线</li>
        <li>transition-delay	定义transition效果开始的时候</li>
    </ol>
    <p>注意： 如果未指定的期限，transition将没有任何效果，因为默认值是0。</p>


    <div>
        <div class="box" id="box1">1</div>
        <br>
        <div class="box" id="box2">2</div>
    </div>
</body>

</html>